<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/myOrder0.css">
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		initPage("订单", "order");

		var app = new Vue({
			el: '#container',
			data: {
				orderList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				endOrder: function() {
					window.location.href = "/wechat/order/endOrder";
				},
				confirmReceive: function(id) {
					event.stopPropagation();
                    window.location.href = "/wechat/order/confirmReceive/id/"+id;
				},
				myCode: function(id) {
					event.stopPropagation();
                    window.location.href = "/wechat/order/recordListPage/id/" + id;
				},
				goodsDetails: function(id){
					window.location.href = "/wechat/product/paySuccess/id/" + id;
				}
				
			}
		})

		var pageNum = 2;
		var isNeedRefresh = false;

		$(window).scroll(function(){
			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(this).height();
			if(!isNeedRefresh &&
					(scrollHeight - scrollTop - windowHeight <= 25)){
				isNeedRefresh = true;
				refreshPage(pageNum++);
			}
		});

		function refreshPage(pageNum) {
			$.ajax({
				url:"/wechat/order/orderList",
				type:"post",
				data:{
					status: "waiting",
					pageNum:pageNum,
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(!isNullOrEmpty(data)) {
						app.orderList = app.orderList.concat(data);
						isNeedRefresh = false;
						setTimeout(bindCountDown, 200);
					}
				},
			})
		}

		$.ajax({
			url:"/wechat/order/orderList",
			type:"post",
			data:{
				status: "waiting",
				pageNum:1,
			},
			dataType:"JSON",
			beforeSend:function(){
				$("#loadingToast").show();
			},
			complete:function(){
				$('#loadingToast').hide();
			},
			success:function(data){
				app.orderList = data;
				setTimeout(bindCountDown, 200);
			},
		})


		function countDown(obj) {

			setInterval(function() {

				//var endTime = new Date(obj.attr("endtime").replace(/-/g,"/"));
				var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(obj.attr("endtime"));	
				} else if (/android/.test(ua)) {
					var endTime = new Date(obj.attr("endtime").replace(/-/g,","));		
				}
				var timeGap = getTimeGap(new Date(), endTime, "hours");
				var content = timeGap["hours"] + ":" + timeGap["minutes"] + ":" + timeGap["seconds"];
				if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
					obj.html("00:00:00");
				}else{
					obj.html(content);
				}

			}, 1000);

		}

		function bindCountDown() {
			$(".countDown[status=0]").each(function() {
				$(this).attr("status", 1);
				countDown($(this));
			});

		}

	});


</script>
<div class="my-order">
	<div class="choose-header">
		<div class="choose-order-type">
			<div class="now active"><span>进行中</span></div>
			<div class="complete" v-on:click="endOrder"><span>已完成</span></div>
		</div>
	</div>
	<div class="has-no-order" v-if="orderList == null">暂无订单</div>
	<div class="my-order-list" v-for="order in orderList" v-on:click="goodsDetails(order.order_id)">
		<div class="my-order-btn" v-on:click="myCode(order.order_id)"><p>我的号码</p></div>
		<div class="my-order-bingo">
			<div class="header-name color-99">团长：{{order.group_name}}</div>
			<div class="progress color-99" v-if="(order.status == 2)">
				进度：<span>{{order.progress}}%</span> | 剩余 <span class="countDown" endtime="{{order.end_time}}" status="0">正在计算</span>
			</div>
			<div class="progress color-99" v-if="(order.status == 3)">
				<span>等待派奖</span>
			</div>
			<div class="goods">
				<div class="goods-img" style="background: url('{{order.image}}')no-repeat center;background-size: cover;"></div>
				<div class="goods-info">
					<p class="title color-font">{{order.product_name}}</p>
					<p class="time color-99">下单时间：{{order.create_time}}</p>
					<p class="price color-99">总价：{{order.price}}</p>
				</div>
				<div class="my-pay-price color-font">{{order.number}}</div>
				<div class="my-pay-num color-99">{{order.number}}份</div>
			</div>
			<div class="bingo-btn" v-if="(order.winner_customer_id == order.customer_id && order.status == 3)">
				<p v-on:click="confirmReceive(order.order_id)">恭喜在本轮中奖</p>
			</div>
		</div>
	</div>
</div>